<template>
  <div class="overview-container p-4">
    <!-- 顶部区域 -->
    <div class="grid grid-cols-3 gap-4 mb-4">
      <!-- 左侧消息模块 -->
      <el-card class="message-card col-span-2" shadow="never">
        <template #header>
          <div class="flex items-center">
            <img src="@/assets/status/icon-seven.png" alt="" />
            <span class="text-lg font-bold">快捷入口</span>
          </div>
        </template>
        <div class="quick-enter flex items-center justify-center">
          <div class="block block-one">
            <div class="left">
              <div class="title">资金中心</div>
              <div class="sTitle">
                企业账户信息中心,<br />快速查看账户资金详情
              </div>
            </div>
            <img src="@/assets/status/icon-eight.png" class="block_bg" alt="" />
          </div>
          <div class="block block-two">
            <div class="left">
              <div class="title">结算中心</div>
              <div class="sTitle">
                企业结算信息中心,<br />快速 查看账户企业结算详情
              </div>
            </div>
            <img src="@/assets/status/icon9.png" alt="" class="block_bg" />
          </div>
          <div class="block block-three">
            <div class="left">
              <div class="title">任务中心</div>
              <div class="sTitle">
                企业任务信息中心,<br />
                快速查看发布企业任务
              </div>
            </div>
            <img src="@/assets/status/icon10.png" alt="" class="block_bg" />
          </div>
          <!-- <div class="text-center">
            <img src="@/assets/status/empty-message.png" class="w-24 h-24 mx-auto mb-2" alt="暂无消息" />
            <p class="text-gray-500">暂无消息</p>
          </div> -->
        </div>
      </el-card>

      <!-- 右侧公告模块 -->
      <el-card class="notice-card">
        <template #header>
          <div class="flex items-center">
            <img src="@/assets/status/icon2.png" alt="" />
            <span class="text-lg font-bold">签约</span>
          </div>
        </template>
        <div class="notice-content flex">
          <img src="@/assets/status/QR_code.png" class="QR_code" alt="二维码" />
          <div class="right">
            <p class="text-gray-500">《XX服务协议》</p>
            <p class="text-gray-500">签约码</p>            
          </div>
        </div>
      </el-card>
    </div>

    <!-- 底部区域 -->
    <div class="grid grid-cols-3 gap-4">
      <!-- 左侧区域（账户信息和数据看板） -->
      <div class="col-span-2 flex">
        <!-- 账户信息 -->
        <el-card class="account-info-card flex-1">
          <template #header>
            <div class="flex items-center">
              <span class="text-lg font-bold">账户信息</span>
            </div>
          </template>
          <div class="flex flex-col p-4">
            <div class="flex items-center mb-6">
              <img src="@/assets/status/balance.d44d9b42.png" alt="" style="width:40px;height:40px">
              <p class="text-gray-500 mb-1 font-bold">可用余额（元）</p>
              <p class="text-2xl font-bold text-[#FF6A00]">¥{{totalAmount.availableBalance}}</p>
            </div>
            <div class="flex justify-between">
            <div class="space-y-2 flex column">
              <div
                class="flex column items-center text-sm px-3 py-2  rounded"
              >
                <span class="text-gray-500">银行余额</span>
                <span class="text-gray-700">¥{{ totalAmount.actualAmount }}</span>
              </div>              
              <div
                class="flex column items-center text-sm px-3 py-2  rounded"
              >
                <span class="text-gray-500">冻结余额</span>
                <span class="text-gray-700">¥{{ totalAmount.frozenAmount }}</span>
              </div>
            </div>              
          </div>
          </div>
        </el-card>

        <!-- 数据看板 -->
        <el-card class="dashboard-card flex-2 index">
          <div class="title-wrapper">
            <span class="title">数据看板</span>
            <div class="time">
              <div
                data-time="1"
                class="type"
                :class="activeIndex === 1 && 'type-select'"
                @click="getCharsData(1), (activeIndex = 1)"
              >
                日
              </div>
              <!-- <div data-time="2" @click="getCharsData(2), activeIndex = 2" class="type" :class="activeIndex === 2 && 'type-select'">周</div> -->
              <div
                data-time="3"
                class="type"
                :class="activeIndex === 2 && 'type-select'"
                @click="getCharsData(2), (activeIndex = 2)"
              >
                月
              </div>
            </div>
          </div>
          <div class="right_main">
            <div class="right_main_info">
              <div class="block block-column">
                <span class="block_title">充值金额（总）</span>
                <div class="block_value font-number-medium">¥{{ noticeAgentSum.totalRechargeAmount }}</div>
              </div>
              <div class="block block-column">
                <span class="block_title">费用金额（总）</span>
                <div class="block_value font-number-medium">¥{{ noticeAgentSum.totalIssueAmount }}</div>
              </div>
              <div class="block block-column">
                <span class="block_title">开票金额（总</span>
                <div class="block_value font-number-medium">{{ noticeAgentSum.amountInvoiced }}</div>
              </div>
            </div>
            <div ref="chartRef" class="right_main_chart" />
          </div>
        </el-card>
      </div>

      <!-- 右侧充值计算器 -->
      <div class="col-span-1">
        <el-card class="calculator-card">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-lg font-bold">充值计算器</span>
              <div class="flex space-x-4">
                <el-radio-group v-model="calculatorType" size="small">
                  <el-radio-button label="estimate">估算计算</el-radio-button>
                  <el-radio-button label="precise">精准计算</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="p-4">
            <div class="mb-4">
              <el-input v-model="amount" placeholder="请输入金额" type="number">
                <template #prefix>
                  <span class="text-gray-500">¥</span>
                </template>
              </el-input>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div class="text-center p-4 bg-gray-50 rounded">
                <p class="text-gray-600 mb-2">服务费率</p>
                <p class="text-xl font-bold text-primary">0.00%</p>
              </div>
              <div class="text-center p-4 bg-gray-50 rounded">
                <p class="text-gray-600 mb-2">服务费金额</p>
                <p class="text-xl font-bold text-danger">¥0.00</p>
              </div>
            </div>
            <el-button type="primary" class="w-full">计算</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Download } from "@element-plus/icons-vue";
import { useECharts } from "@pureadmin/utils";
import {
  getTotalAgent,
  getCorrelationAgentSum,
  getCumulativeDataCorrelationAgent
} from "@/api/welcome";

const chartRef = ref(null);
const { setOptions } = useECharts(chartRef);
const totalAmount = ref({});
const noticeAgentSum = ref({});
const activeIndex = ref(1);
const type = ref(1);
const option = {
  title: {
    text: ""
  },
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["充值金额", "费用金额", "开票金额"]
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: false
    }
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["-", "-", "-", "-", "-", "-", "-"]
  },
  yAxis: {
    type: "value",
    position: "left"
  },
  series: [
    {
      name: "充值金额",
      type: "line",
      stack: "Total",
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: "费用金额",
      type: "line",
      stack: "Total",
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: "开票金额",
      type: "line",
      stack: "Total",
      data: [0, 0, 0, 0, 0, 0, 0]
    }
  ]
};

onMounted(() => {
  setOptions(option);
});

// 充值计算器类型
const calculatorType = ref("estimate");
// 充值金额
const amount = ref("");

// 获取数据
getTotalAgent({
  merchantsInfoId: 454,
  taxSourcesId: 90
}).then(res => {
  totalAmount.value = res.data;
});

// 数据看板表格显示
getCharsData(type.value);
function getCharsData(type) {
  type = type;
  const params = {
    type,
    merchantsInfoId: 454,
    taxSourcesId: 90
  };
  getCumulativeDataCorrelationAgent(params).then(res => {
    const { allTimes } = res.data;
    option.xAxis.data = allTimes;
    // sons.forEach((item, index) => {
    //   if (option.series[index]) {
    //     option.series[index].data = item.data;
    //   }
    // });
    setOptions(option);
  });
}
getCorrelationAgentSum({
  type: type.value,
  merchantsInfoId: 454,
  taxSourcesId: 90
}).then(res => {
  noticeAgentSum.value = res.data;
});
</script>

<style lang="scss" scoped>
.overview-container {
  @apply bg-white;

  .el-card {
    @apply rounded-lg shadow-sm;

    :deep(.el-card__header) {
      @apply py-4 px-5 border-b border-gray-200;
    }
  }

  .text-primary {
    @apply text-blue-500;
  }

  .text-success {
    @apply text-green-500;
  }

  .text-warning {
    @apply text-yellow-500;
  }

  .text-danger {
    @apply text-red-500;
  }
  .el-card {
    :deep(.el-card__header) {
      padding-bottom: 0;
      border: 0;
    }
  }
}

.account-info-card {
  flex: 1;
  // 其他样式
}

.dashboard-card {
  flex: 2;
  // 其他样式
}

.text-lg {
  margin-left: 10px;
}
.quick-enter {
  justify-content: space-around;
}
.flex {
  display: flex;
}
.flex-wrap{
  flex-wrap:wrap
}
.column{flex-direction: column}
.quick-enter .block {
  // min-width: 330px;
  height: 238px;
  padding: 55px 0 0 30px;
  margin: 0 10px;
  position: relative;
  border-radius: 8px;
  flex: 1;
  .left {
    position: absolute;
    z-index: 1;
    .title {
      font-size: 22px;
      font-weight: 500;
      line-height: 30px;
      color: #8d4f31;
      padding-bottom: 22px;
    }
    .sTitle {
      font-size: 16px;
      line-height: 30px;
    }
  }
  .block_bg {
    width: 94px;
    height: 99px;
    position: absolute;
    bottom: 16px;
    right: 10px;
  }
}
.block-one {
  background: linear-gradient(96deg, #fdf6e6 0%, #fdf8ec 100%);
}
.block-two {
  background: linear-gradient(96deg, #bcf7ee 0%, #d7fcf7 100%);
  .left {
    .title {
      color: #00474f;
    }
    .sTitle {
      color: #50938f;
    }
  }
  .block_bg {
    width: 87px;
    height: 94px;
  }
}
.block-three {
  background: linear-gradient(96deg, #e6e6fb 0%, #f0f2fd 100%);
  .left {
    .title {
      color: #27223a;
    }
    .sTitle {
      color: #676d80;
    }
  }
  .block_bg {
    width: 101px;
    height: 94px;
  }
}
.notice-content {
  font-size: 18px;
  font-weight: bold;
  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    p {
      line-height: 40px;
    }
    .Download {
      margin-top: 10px;
    }
  }
}
.QR_code {
  width: 190px;
  height: 190px;
  margin: 20px;
}
.main {
  .bottom {
    margin-top: 16px;

    .index {
      width: 100%;
      max-width: 100%;
      height: 100%;
      padding: 2.2222222222vh 1.25vw 2.4074074074vh;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
    }
  }
}

.index {
  .title-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time {
      display: flex;
      border: 1px solid #dcdee1;
      border-radius: 4px;
      font-size: 0.875rem;

      .type {
        padding: 0.5555555556vh 0.8333333333vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        cursor: pointer;
      }

      .type-select {
        color: #1c9fff;
      }
    }
  }

  .right_main_info {
    margin-right: 1.25vw;
    min-width: 28%;
    display: flex;
    flex-direction: column;

    .block {
      padding: 2.6851851852vh 1.25vw;
      background: rgba(245, 246, 250, 0.4);
      border-radius: 10px;

      &:not(:last-child) {
        margin-bottom: 1.4814814815vh;
      }
    }

    .block_title {
      font-size: 14px;
      color: #8c8c8c;
    }

    .block_value {
      margin-top: 0.7407407407vh;
      font-size: 18px;
      color: #262626;
    }
  }

  .right_main_chart {
    width: 100%;
  }
}

.right_main {
  width: 100%;
  margin-top: 2.037037037vh;
  display: flex;
}
</style>
